<script setup lang="ts">
import useUserStore from "@/store/modules/user.ts";
import {User, Lock} from "@element-plus/icons-vue";
import {computed, reactive, ref, watch} from "vue";
//引入倒计时组件
import CountDown from "@/components/countdaown/index.vue"
import {ElMessage} from "element-plus";
import {reqWxLogin} from "@/api/hospital";
import {WXLoginResponseData} from "@/api/hospital/type.ts";

let scene = ref<number>(0);//0代表手机号码登录 1代表微信扫码登录
//收集表单数据
let loginParam = reactive({
  phone: '',//收集手机号码
  code: '' //收集验证码
});
//计算出当前表单元素收集的内容是否手机号码格式
let isPhone = computed(() => {
  const reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
  return reg.test(loginParam.phone);
});
let userStore = useUserStore();

//定义一个响应式数据控制倒计时组件显示与隐藏
let flag = ref<boolean>(false);//flag如果为真，开启倒计时
//获取表单组件
let form = ref<any>();
//点击微信扫码登录|微信小图标切换为微信扫码登录
const changeScene = async () => {
  scene.value = 1
  let redirect_URL = encodeURIComponent(window.location.origin+'/wxlogin')
  let result:WXLoginResponseData = await reqWxLogin(redirect_URL);
  //生产微信扫码二维码管理页面
  let obj =  new WxLogin({
    self_redirect:true,
    id: 'login_container', // 需要显示的容器id
    appid: result.data.appid, // 公众号appid wx*******
    scope: result.data.scope, // 网页默认即可
    redirect_uri: result.data.redirectUri, // 授权成功后回调的url
    state: result.data.state, // 可设置为简单的随机数加session用来校验
    style: 'black', // 提供"black"、"white"可选。二维码的样式
    href: '' // 外部css文件url，需要https
  })
}
const getCode = async () => {
  //解决element-plus按钮禁用还能点击的问题
  if (!isPhone.value || flag.value) {
    return;
  }
  //开启倒计时模式，倒计时组件显示出来
  flag.value = true;
  try {
    await userStore.getCode(loginParam.phone);
    // loginParam.code = userStore.code;
  } catch (error) {
    ElMessage({
      type: 'error',
      message: (error as Error).message
    });
  }
}
//计数器组件自定义事件
//当倒计时为零的时候，通知父组件倒计时组件隐藏
const getFlag = (val: boolean) => {
  //倒计时模式结束
  flag.value = val;
}
const login = async () => {
  await form.value.validate();

  try {
    await userStore.userLogin(loginParam);
    userStore.visible = false
  } catch (error) {
    ElMessage({
      type: 'error',
      message: (error as Error).message
    })
  }
}
//自定义校验规则：手机号码自定义校验规则
const validatorPhone = (rule: any, value: any, callback: any) => {
  //rule:表单校验规则对象
  //value：当前文本内容
  //callback:回调函数
  const reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
  if(reg.test(value)){
    callback();
  }else{
    callback(new Error('请输入正确的手机号码格式'))
  }

}
const validatorCode = (rule: any, value: any, callback: any) => {
    if(/^\d{6}$/.test(value)){
      callback();
    }else{
      callback(new Error('请数据正确的验证码格式'))
    }
}
const rules = {
  //手机号码校验规则
//required:代表当前字段务必进行校验
//message:代表的校验错误的提示信息
//trigger:代表表单校验触发的时机 change:文本发生变化的时候进行校验   blur:失却焦点的时候触发校验
//min:代表的是最小位数
//max:代表的是最大的位置
//   phone: [{required: true, message: "手机号码务必11位", trigger: "change", min: 11}],
//   code: [{required: true, message: "验证码务必6位", trigger: "blur", min: 6}]

  phone: [{ validator: validatorPhone, trigger: 'change' }],
  code: [{ validator: validatorCode, trigger: 'blur' }],
}

/*const close=()=>{
  //清空收集的数据
  Object.assign(loginParam,{phone:'',code:''});
  //清除上一次校验的结果
  form.value.resetFields();
}*/
const closeDialog =()=>{
  // close();
  userStore.visible = false
}
const handler=()=>{
  scene.value=0;
}
//监听场景的数据
watch(()=>scene.value,(val:number)=>{
  if(val===1){
    userStore.queryState();
  }
})
</script>

<script lang="ts">
export default {
  name: 'Login'
}
</script>
<template>
  <div class="login_container">
    <el-dialog title="用户登录" v-model="userStore.visible" @close="close">
      <div class="content">
        <el-row>
          <el-col :span="12">
            <div class="login">
              <div v-show="scene==0">
                <el-form :model="loginParam" :rules="rules" ref="form">
                  <el-form-item prop="phone">
                    <el-input placeholder="请输入手机号码" :prefix-icon="User" v-model="loginParam.phone"></el-input>
                  </el-form-item>
                  <el-form-item prop="code">
                    <el-input placeholder="请输入手机验证码" :prefix-icon="Lock" v-model="loginParam.code"></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button :disabled="!isPhone||flag?true:false">
                      <CountDown v-if="flag" :flag="flag" @getFlag="getFlag"/>
                      <span v-else @click="getCode">获取验证码</span>
                    </el-button>
                  </el-form-item>
                </el-form>
                <el-button style="width: 100%" type="primary" size="default" @click="login"
                           :disabled="!isPhone||loginParam.code.length<0?true:false">用户登录
                </el-button>
                <div class="bottom" @click="changeScene">
                  <p>微信扫码登录</p>
                  <svg t="1722215745147" class="icon" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="10455" width="32" height="32">
                    <path
                        d="M337.387283 341.82659c-17.757225 0-35.514451 11.83815-35.514451 29.595375s17.757225 29.595376 35.514451 29.595376 29.595376-11.83815 29.595376-29.595376c0-18.49711-11.83815-29.595376-29.595376-29.595375zM577.849711 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763zM501.641618 401.017341c17.757225 0 29.595376-12.578035 29.595376-29.595376 0-17.757225-11.83815-29.595376-29.595376-29.595375s-35.514451 11.83815-35.51445 29.595375 17.757225 29.595376 35.51445 29.595376zM706.589595 513.479769c-11.83815 0-22.936416 12.578035-22.936416 23.6763 0 12.578035 11.83815 23.676301 22.936416 23.676301 17.757225 0 29.595376-11.83815 29.595376-23.676301s-11.83815-23.676301-29.595376-23.6763z"
                        fill="#28C445" p-id="10456"></path>
                    <path
                        d="M510.520231 2.959538C228.624277 2.959538 0 231.583815 0 513.479769s228.624277 510.520231 510.520231 510.520231 510.520231-228.624277 510.520231-510.520231-228.624277-510.520231-510.520231-510.520231zM413.595376 644.439306c-29.595376 0-53.271676-5.919075-81.387284-12.578034l-81.387283 41.433526 22.936416-71.768786c-58.450867-41.433526-93.965318-95.445087-93.965317-159.815029 0-113.202312 105.803468-201.988439 233.803468-201.98844 114.682081 0 216.046243 71.028902 236.023121 166.473989-7.398844-0.739884-14.797688-1.479769-22.196532-1.479769-110.982659 1.479769-198.289017 85.086705-198.289017 188.67052 0 17.017341 2.959538 33.294798 7.398844 49.572255-7.398844 0.739884-15.537572 1.479769-22.936416 1.479768z m346.265896 82.867052l17.757225 59.190752-63.630058-35.514451c-22.936416 5.919075-46.612717 11.83815-70.289017 11.83815-111.722543 0-199.768786-76.947977-199.768786-172.393063-0.739884-94.705202 87.306358-171.653179 198.289017-171.65318 105.803468 0 199.028902 77.687861 199.028902 172.393064 0 53.271676-34.774566 100.624277-81.387283 136.138728z"
                        fill="#28C445" p-id="10457"></path>
                  </svg>
                </div>
              </div>
              <div class="webchat" v-show="scene==1">
                <div id="login_container"></div>
                <div class="phone" @click="handler">
                  <p>手机短信验证码登录</p>
                  <svg t="1722590738044" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2633" width="16" height="16"><path d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z" p-id="2634"></path></svg>
                </div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="leftContent">
              <div class="top">
                <div class="item">
                  <img src="../../assets/images/code_app.png" alt=""/>
                  <svg t="1722216391237" class="icon" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="10638" width="16" height="16">
                    <path d="M0 0v1024h1024V0z m1004.307692 1004.307692H19.692308V19.692308h984.615384z" fill="#8a8a8a"
                          p-id="10639"></path>
                    <path
                        d="M415.113846 324.923077c-135.876923 24.024615-181.169231 177.624615-73.255384 248.123077 5.907692 3.544615 5.907692 3.150769-2.756924 29.538461l-7.876923 22.843077 27.569231-14.572307 27.569231-14.572308 14.178461 3.544615a244.184615 244.184615 0 0 0 48.049231 6.301539h7.483077l-2.756923-10.24c-21.267692-78.769231 52.381538-157.538462 148.48-157.538462h12.996923l-2.756923-9.058461a171.716923 171.716923 0 0 0-196.923077-105.55077z m-11.815384 68.923077a24.024615 24.024615 0 1 1-32.295385 6.695384 25.206154 25.206154 0 0 1 32.295385-6.695384z m115.790769 0a23.630769 23.630769 0 1 1-24.418462 0 26.781538 26.781538 0 0 1 24.418462 0z m52.381538 58.289231a124.849231 124.849231 0 0 0-111.458461 122.092307c3.544615 78.769231 95.704615 132.726154 184.32 108.307693l10.24-2.756923 22.055384 11.815384a175.261538 175.261538 0 0 0 22.449231 11.027692 96.886154 96.886154 0 0 0-5.12-18.904615c-7.089231-21.661538-7.089231-20.48 2.363077-27.175385 106.338462-76.406154 12.996923-229.612308-124.849231-204.406153z m-2.756923 63.40923a18.904615 18.904615 0 0 1 6.301539 20.873847 18.510769 18.510769 0 1 1-6.301539-20.873847z m94.129231 0a18.116923 18.116923 0 0 1-3.150769 29.538462 18.510769 18.510769 0 1 1 3.150769-29.538462z"
                        fill="#8a8a8a" p-id="10640"></path>
                  </svg>
                  <p>微信扫一扫关注</p>
                  <p>快速预约挂号</p>
                </div>
                <div class="item">
                  <img src="../../assets/images/code_login_wechat.png" alt=""/>
                  <svg t="1722216639576" class="icon" viewBox="0 0 1024 1024" version="1.1"
                       xmlns="http://www.w3.org/2000/svg" p-id="11768" width="16" height="16">
                    <path
                        d="M736.653061 929.959184H287.346939c-45.97551 0-83.591837-37.616327-83.591837-83.591837V177.632653c0-45.97551 37.616327-83.591837 83.591837-83.591837h449.306122c45.97551 0 83.591837 37.616327 83.591837 83.591837v668.734694c0 45.97551-37.616327 83.591837-83.591837 83.591837zM287.346939 135.836735c-22.987755 0-41.795918 18.808163-41.795919 41.795918v668.734694c0 22.987755 18.808163 41.795918 41.795919 41.795918h449.306122c22.987755 0 41.795918-18.808163 41.795919-41.795918V177.632653c0-22.987755-18.808163-41.795918-41.795919-41.795918H287.346939z"
                        fill="#333333" p-id="11769"></path>
                    <path
                        d="M616.489796 815.020408H407.510204c-11.493878 0-20.897959-9.404082-20.897959-20.897959s9.404082-20.897959 20.897959-20.897959h208.979592c11.493878 0 20.897959 9.404082 20.897959 20.897959s-9.404082 20.897959-20.897959 20.897959z"
                        fill="#333333" p-id="11770"></path>
                  </svg>
                  <p>扫一扫下载</p>
                  <p>预约挂号APP</p>
                </div>
              </div>
            </div>
            <p class="tip">尚医通官方指定平台</p>
            <p class="tip">快速挂号 安全放心</p>
          </el-col>
        </el-row>
      </div>
      <template #footer>
        <el-button type="primary" size="default" @click="closeDialog">关闭窗口</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss">
.login_container {
  ::v-deep(.el-dialog__body) {
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }

  .login {
    padding: 20px;
    border: 1px solid #ccc;
    .webchat{
      display: flex;
      flex-direction: column;
      align-items: center;
      .phone{
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;
        p{
          margin: 10px 0px;
        }
      }
    }
  }

  .bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;

    p {
      margin: 10px 0px;
    }
  }

  .leftContent {
    .top {
      display: flex;
      justify-content: space-around;

      .item {
        display: flex;
        flex-direction: column;
        align-items: center;

        img {
          width: 130px;
          height: 130px;
        }

        p {
          margin: 5px 0px;
        }
      }
    }
  }

  .tip {
    text-align: center;
    margin: 20px 0px;
    font-size: 20px;
    font-weight: 900;
  }

}
</style>
